<template>
	<div>
		<el-form :inline="true">
			<el-form-item>
				<el-input v-model="searchForm.uid" placeholder="uid" clearable> </el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="searchForm.status" placeholder="请选择状态">
					<el-option label="全部" value=""></el-option>
					<el-option label="待处理" value="WAIT_HANDLE"></el-option>
					<el-option label="已处理" value="HAS_HANDLED"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getTUserList">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="reloadList">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column prop="uid" align="center" label="uid"> </el-table-column>
			<el-table-column prop="app_type" align="center" label="产品类型">
				<template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.app_type === 'TRANSLATOR'" type="success">translator</el-tag>
					<el-tag size="small" v-if="scope.row.app_type === 'SUBTITLES'" type="danger">subtitles</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="app_version_id" label="build号" align="center"> </el-table-column>
			<el-table-column prop="contact" width="130" label="联系方式" align="center"> </el-table-column>
			<el-table-column prop="content" width="300" label="内容" align="center"> </el-table-column>
			<el-table-column prop="device_id" label="设备id" align="center"> </el-table-column>
			<el-table-column prop="device_model" label="设备型号" align="center"> </el-table-column>
			<el-table-column prop="os_type" label="操作系统类型" align="center"> </el-table-column>
			<el-table-column prop="os_version" label="操作系统版本" align="center"> </el-table-column>
			<el-table-column label="图像" align="center">
				<template slot-scope="scope">
					<el-button
						type="primary"
						v-if="hasAuth('sys:feedback:imageurls') && scope.row.images && scope.row.images.length > 0"
						@click="showImageClick(scope.row)"
						>查看</el-button
					>
				</template>
			</el-table-column>

			<el-table-column prop="gmt_create" align="center" label="创建时间">
				<template slot-scope="scope">
					{{ formatTime(scope.row.gmt_create) }}
				</template>
			</el-table-column>
			<el-table-column prop="remark" label="备注" align="center"> </el-table-column>
			<el-table-column prop="status" align="center" label="状态">
				<template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.status === 'WAIT_HANDLE'" type="success">待处理</el-tag>
					<el-tag size="small" v-if="scope.row.status === 'HAS_HANDLED'" type="danger">已处理</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button
						type="primary"
						v-if="hasAuth('sys:feedback:handle') && scope.row.status === 'WAIT_HANDLE'"
						@click="showFeedbackModal(scope.row)"
						>处理</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
		<ImageList ref="imageList" v-if="imageListVisible" />
		<FeedbackProcess ref="feedbackProcess" v-if="feedbackProcessVisible" @refreshDataList="getTUserList" />
	</div>
</template>

<script>
import dayjs from 'dayjs';
import ImageList from './imageList';
import FeedbackProcess from './feedbackProcess';
export default {
	name: 'Feedback',
	components: {
		ImageList,
		FeedbackProcess,
	},
	data() {
		return {
			searchForm: {},
			delBtlStatu: true,
			total: 0,
			size: 10,
			current: 1,
			multipleSelection: [],
			vegetablesType: [],
			imageListVisible: false,
			feedbackProcessVisible: false,
			tableData: [],
			farmList: [],
			loading: false,
		};
	},
	created() {
		this.getTUserList();
	},
	methods: {
		reloadList() {
			this.searchForm = {};
			this.getTUserList();
		},
		formatTime(time) {
			const localTime = dayjs(time).format('YYYY-MM-DD HH:mm:ss');
			// 使用Day.js将时间转换成当前时区的时间
			return localTime;
		},
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		showImageClick(item) {
			this.imageListVisible = true;
			this.$nextTick(() => {
				this.$refs.imageList.init(item);
			});
		},
		showFeedbackModal(item) {
			this.feedbackProcessVisible = true;
			this.$nextTick(() => {
				this.$refs.feedbackProcess.init(item);
			});
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getTUserList();
		},
		handleCurrentChange(val) {
			console.log(`当前页 ${val}`);
			this.current = val;
			this.getTUserList();
		},
		getTUserList() {
			this.$axios
				.get('/user/feedback/list', {
					params: {
						status: this.searchForm.status,
						current: this.current,
						size: this.size,
						uid: this.searchForm.uid,
					},
				})
				.then((res) => {
					console.log('userList', res);
					// 其余的代码
					this.tableData = res.data.records;
					this.size = res.data.size;
					this.current = res.data.current;
					this.total = res.data.total;
				})
				.catch((error) => {
					console.error('发生请求错误：', error);
				});
		},
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-right: 10px;
}
</style>
